<template>
    <view class="idle">
        <u-sticky bgColor="#fff">
            <u-tabs :list="tabsList" lineColor="#966BFF" :current="state.current" @change="changeTabs"></u-tabs>
        </u-sticky>
        <block v-if="state.current === 0">
            <SwipAction :swipeData="swipeData"></SwipAction>
        </block>
        <block v-if="state.current === 1">
            <SwipAction :swipeData="swipeData2"></SwipAction>
        </block>
    </view>
</template>

<script lang="ts" setup >
import { ref } from 'vue';
import SwipAction from '../components/SwipeAction/index.vue';
const tabsList = ([
    { name: '出手的' },
    { name: '入手的' }
]);
const swipeData = ([
    { name: '闲置名称', price: 10.01, address: '浙江省杭州市拱墅区申花路运河财富中心9幢' },
    { name: '闲置名称', price: 10.01, address: '浙江省杭州市拱墅区申花路运河财富中心9幢' },
    { name: '闲置名称', price: 10.01, address: '浙江省杭州市拱墅区申花路运河财富中心9幢' }
]);
const swipeData2 = ([
    { name: '闲置名称', price: 10.01, address: '浙江省杭州市拱墅区申花路运河财富中心9幢' },
    { name: '闲置名称', price: 10.01, address: '浙江省杭州市拱墅区申花路运河财富中心9幢' },
    { name: '闲置名称', price: 10.01, address: '浙江省杭州市拱墅区申花路运河财富中心9幢' },
    { name: '闲置名称', price: 10.01, address: '浙江省杭州市拱墅区申花路运河财富中心9幢' }
]);
const state = ref({
    current: 0
})

const changeTabs = ({ index }: { index: number }) => {
    state.value.current = index;
}
</script>

<style lang="scss" scoped>
.idle {
    .swipeItem {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding: 0 10rpx;
        margin: 20rpx 0;

        .image {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin: 0 15rpx;
        }

        .info {
            display: flex;
            flex-direction: column;
            justify-content: center;

            .name {
                font-size: 30rpx;
                margin: 5rpx 0;
            }

            .price {
                margin-bottom: 4rpx;
                font-size: 25rpx;
                color: #C27988;
            }

            .address {
                font-size: 22rpx;
                color: #B0B0B0;
            }
        }
    }
}</style>